<template>
  <div style="padding: 20px; display: flex">
    <!--  用户购买界面-->

    <el-tabs class="navigate" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="first">
        <div style="margin: 10px 0">
          <el-input
            v-model="search"
            placeholder="请输入关键字"
            style="width: 200px"
            clearable
          >
          </el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load"
            >查询</el-button
          >
        </div>
        <el-table
          v-bind:data="tableData"
          :default-expand-all="true"
          class="parentTable"
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="index"
            label="订单编号"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="199"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="订单价格"
            width="114"
          ></el-table-column>
          <el-table-column
            prop="shop"
            label="是否付款"
            width="100"
            :filters="[
              { value: 已付款, text: '已付款' },
              { value: 未付款, text: '未付款' },
            ]"
            :filter-method="filterHandlers"
            column-key="status"
          >
            <template v-slot="scope">
              <span v-if="scope.row.account_type === 已付款">已付款</span>
              <span v-else>未付款</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="send"
            label="是否发货"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column prop="time" label="下单时间"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template v-slot="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="second">
        <div style="margin: 10px 0">
          <el-input
            v-model="search"
            placeholder="请输入关键字"
            style="width: 200px"
            clearable
          >
          </el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load"
            >查询</el-button
          >
        </div>
        <el-table
          v-bind:data="tableData1"
          :default-expand-all="true"
          class="parentTable"
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="index"
            label="订单编号"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="199"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="订单价格"
            width="114"
          ></el-table-column>
          <el-table-column
            prop="shop"
            label="是否付款"
            width="100"
            :filters="[
              { value: 已付款, text: '已付款' },
              { value: 未付款, text: '未付款' },
            ]"
            :filter-method="filterHandlers"
            column-key="status"
          >
            <template v-slot="scope">
              <span v-if="scope.row.account_type === 已付款">已付款</span>
              <span v-else>未付款</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="send"
            label="是否发货"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column prop="time" label="下单时间"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template v-slot="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待收获" name="third">
        <div style="margin: 10px 0">
          <el-input
            v-model="search"
            placeholder="请输入关键字"
            style="width: 200px"
            clearable
          >
          </el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load"
            >查询</el-button
          >
        </div>
        <el-table
          v-bind:data="tableData2"
          :default-expand-all="true"
          class="parentTable"
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="index"
            label="订单编号"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            width="199"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="订单价格"
            width="114"
          ></el-table-column>
          <el-table-column
            prop="shop"
            label="是否付款"
            width="100"
            :filters="[
              { value: 已付款, text: '已付款' },
              { value: 未付款, text: '未付款' },
            ]"
            :filter-method="filterHandlers"
            column-key="status"
          >
            <template v-slot="scope">
              <span v-if="scope.row.account_type === 已付款">已付款</span>
              <span v-else>未付款</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="send"
            label="是否发货"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column prop="time" label="下单时间"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template v-slot="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待评价" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "userPurchase",
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          index: "01",
          name: "vue进阶课程",
          price: "170",
          shop: "已付款",
          send: "1",
          time: 1,
        },
        {
          index: "04",
          name: "java基础课程",
          price: "150",
          shop: "已付款",
          send: "2",
          time: 2,
        },
        {
          index: "06",
          name: "大数据入门学习",
          price: "100",
          shop: "未付款",
          send: "2",
          time: 2,
        },
      ],
      tableData1: [
        {
          index: "01",
          name: "vue进阶课程",
          price: "170",
          shop: "未付款",
          send: "1",
          time: 1,
        },
        {
          index: "06",
          name: "大数据入门学习",
          price: "100",
          shop: "未付款",
          send: "2",
          time: 2,
        },
      ],
      tableData2: [
        {
          index: "04",
          name: "java基础课程",
          price: "150",
          shop: "已付款",
          send: "2",
          time: 2,
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterHandlers(value, row, column) {
      console.log(value, row, column);
      let property = column["property"];
      return row.account_id[property] === value;
    },
  },
};
</script>

<style scoped></style>
